<!DOCTYPE html>

<html>
<head>
<title>zepto test</title>

<meta name="viewport"
	content="width=device-width,minimum-scale=1.0,maximum-scale=1.0" />
<link rel="shortcut icon" href="../favicon.ico" />
<!-- 57*57 -->
<link rel="apple-touch-icon" href="../img/touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72"
	href="../img/touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114"
	href="../img/touch-icon-iphone4.png" />

<link rel="stylesheet" href="http://m.tianya.cn/touch/css/main.css">

<script src="static/js/zepto.js"></script>

<style>
.delete {
	display: none;
}
</style>
</head>

<body class="page page-content">

	<header id="header" class="fn-cf">
		<div id="logo">
			<h2>logo</h2>
			<p id="jVer">- logo desc</p>
		</div>
		<div id="jVerCon" class="nav-ver fn-hide">
			<ul class="list-c3 fn-cf">
				<li>desc1</li>
				<li class="sl">desc2</li>
				<li>desc3</li>
			</ul>
		</div>
		<div id="meta">
			<p>meta</p>
		</div>
	</header>


	<section id="crumbs">
		<a class="ico ico-crumbs" href="/">Index</a> <a class="ico ico-crumbs"
			href="/webnote">Second</a>
	</section>
	<section id="bar" class="fn-cf">
		<p>Status: It works.</p>
	</section>
	<section id="content">
		<ul id=items>
			<li>List item 1 <span class=delete>DELETE</span></li>
			<li>List item 2 <span class=delete>DELETE</span></li>
		</ul>

		<script>
			// show delete buttons on swipe
			$('#items li').swipe(function() {
				$('.delete').hide()
				$('.delete', this).show()
			})

			// delete row on tapping delete button
			$('.delete').tap(function() {
				$(this).parent('li').remove()
			})
		</script>
	</section>

	<footer id="footer">
		<p>
			<a href="http://zeptojs.com/">zeptojs</a>
		</p>
	</footer>
</body>
</html>